<template>
  <el-scrollbar>
    <div :class-name="className" class="paginationTable">
      <el-table
        ref="table"
        :data="dataList"
        :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
        :cell-style="cellStyle"
        @select="cellSelect"
        @select-all="cellAllSelect"
        @selection-change="cellSelectChange"
        @sort-change="sortChange"
        :span-method="arraySpanMethod"
        default-expand-all
      >
        <slot />
      </el-table>
      <div class="toolHubs">
        <el-pagination
          :total="pager.total"
          :current-page="pager.current"
          :page-size="pager.pageSize"
          @current-change="changePage"
          layout="prev, pager, next"
        ></el-pagination>
        <el-select v-model="pager.pageSize" @change="selectValueChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span style="margin: auto 12px">
          跳转到
          <el-tooltip
            v-model="isEnterTip"
            effect="dark"
            content="输入完毕，使用回车确认"
            placement="top"
          >
            <el-input
              v-model="jumperPage"
              @keyup.enter="inputPageChange"
            ></el-input>
          </el-tooltip>
          页
        </span>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import { reactive, ref, watch } from 'vue'
  import { isNumber } from '@/utils/validate.js'
  import { ElMessage as message } from 'element-plus'
  import { computed } from '@vue/runtime-core'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated'
  export default {
    name: 'paginationTable',
    emits: ['pagination', 'sortChange', 'getPTbale', 'spanMethod'],
    props: {
      className: {
        type: String,
        default: '',
      },
      tableData: {
        type: Object,
        default() {
          return { data: [], total: 0 }
        },
      },
      spanMethod: {
        type: Function,
      },
      cellStyle: {
        type: Object,
        default() {
          return { 'text-align': 'center' }
        },
      },
    },
    data() {
      return {
        options: [
          {
            label: '5条/页',
            value: 5,
          },
          {
            label: '10条/页',
            value: 10,
          },
          {
            label: '20条/页',
            value: 20,
          },
          {
            label: '50条/页',
            value: 50,
          },
        ],
        // dataList: [],
        isEnterTip: false,
      }
    },
    setup(props, context) {
      const pager = reactive({
        current: 1,
        total: 0,
        pageSize: 5,
        pagingResource: '',
        orderType: 1, // ascending 生序 descending降序
      })
      let jumperPage = ref(null)

      const selectValueChange = function (val) {
        pager.pageSize = val
        context.emit('pagination', pager)
      }

      const changePage = function (val) {
        pager.current = val
        context.emit('pagination', pager)
      }

      const inputPageChange = function () {
        if (!isNumber(jumperPage.value)) {
          message({ message: '请输入数字', type: 'warning' })
          return
        }
        pager.current = parseInt(jumperPage.value)
        context.emit('pagination', pager)
        jumperPage.value = null
      }

      const table = ref(null)
      const clearData = function () {
        pager.current = 1
        pager.total = 0
        pager.pageSize = 5
        pager.pagingResource = ''
        pager.orderType = 1
        table.value.clearSort()
      }

      onMountedOrActivated(() => {
        context.emit('getPTbale', table.value)
      })
      const sortChange = function (val) {
        pager.orderType =
          val.order === 'ascending' || val.order === null ? 1 : 0
        // 以前只做了单列排序 没有添加。如今暂补上多列排序，等后期统一改hooks
        pager.sort_prop = val.prop
        pager.sort_column = val.column
        pager.sort_order = val.order
        context.emit('pagination', pager)
      }

      const dataList = computed(() => props.tableData.data)

      function cellSelect(selection, row) {
        console.log('cellSelect =' + JSON.stringify(selection))
      }
      function cellAllSelect(selection) {}
      function cellSelectChange(selection) {
        context.emit('cellSelectChange', selection)
      }

      function arraySpanMethod(row) {
        // context.emit('spanMethod', row)
        if (props.spanMethod) {
          return props.spanMethod(row)
        }
      }
      watch(
        () => props.tableData.total,
        (val) => {
          pager.total = val
        },
        { deep: true }
      )
      return {
        pager,
        selectValueChange,
        changePage,
        inputPageChange,
        clearData,
        jumperPage,
        dataList,
        sortChange,
        table,
        cellSelect,
        cellAllSelect,
        cellSelectChange,
        arraySpanMethod,
      }
    },
  }
</script>
<style lang="scss">
  .paginationTable {
    padding: 0 12px;

    //min-width: 800px;
    //position: relative;
    .el-table {
      //position: absolute;
    }

    .toolHubs {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: 12px;
      padding-bottom: 12px;

      .el-select {
        width: 100px;
        height: 40px;
      }

      .el-input {
        width: 100px;
      }
    }
  }
</style>
